<!--
 * @Description: 
 * @Author:  
 * @Date: 2022-04-11 08:58:25
 * @LastEditTime: 2022-04-25 17:28:28
 * @LastEditors:  
-->
<template>
  <div class="role">
    <!-- <i class="fa fa-warning fa-lg"></i> -->
    <div class="tableBox">
      <el-table :data="tableData"
                @cell-dblclick="dblclick"
                :cell-class-name="cellClassName"
                size="mini"
                border>
        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <el-table-column prop="roleNumber"
                         width="80"
                         label="角色编号"></el-table-column>
        <el-table-column prop="roleName"
                         label="角色名称"></el-table-column>
        <el-table-column prop="authStr"
                         label="权限字符"></el-table-column>
        <el-table-column prop="order"
                         label="显示顺序"></el-table-column>
        <el-table-column prop="department"
                         label="所属部门"></el-table-column>
        <el-table-column prop="state"
                         label="状态"></el-table-column>
        <el-table-column prop="createTime"
                         label="创建时间"></el-table-column>
        <el-table-column label="操作"
                         width="180">
          <template slot-scope="scope">
            <div class="opera">
              <div class="btnItem">
                <el-tooltip class="item"
                            effect="light"
                            content="编辑"
                            placement="bottom-start">
                  <el-button type="text"
                             size="mini">
                    <i class="el-icon-edit"></i>
                  </el-button>
                </el-tooltip>
              </div>
              <div class="btnItem">
                <el-tooltip class="item"
                            effect="light"
                            content="删除"
                            placement="bottom-start">
                  <el-button type="text"
                             size="mini">
                    <i class="el-icon-delete"></i>
                  </el-button>
                </el-tooltip>
              </div>
              <div class="btnItem">
                <el-tooltip class="item"
                            effect="light"
                            content="新增"
                            placement="bottom-start">
                  <el-button type="text"
                             size="mini"
                             @click="test(scope.row)">
                    <i class="el-icon-share"></i>
                  </el-button>
                </el-tooltip>
              </div>
              <div class="btnItem">
                <el-tooltip class="item"
                            effect="light"
                            content="下载飞行数据"
                            placement="bottom-start">
                  <el-button :disabled="!scope.row.downloadAble"
                             type="text"
                             size="mini">
                    <i class="el-icon-download"></i>
                  </el-button>
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary"
                 @click="test">测试</el-button>
    </div>
    <div>
      <input type="text"
             v-model="filterCount">
      <div>{{filterCount | filterPrice}}</div>
      <div>{{filterCount | filterDate}}</div>
    </div>
  </div>
</template>

<script>
import extendComponents from "../../components/threeC/data"; // 1. 引入

export default {
  data () {
    return {
      tableData: [
        {
          roleNumber: 1,
          roleName: '超级管理员',
          authStr: 'admin',
          order: 1,
          state: 0,
          department: '研发部',
          createTime: '2022-06-09',
          downloadAble: false
        }, {
          roleNumber: 2,
          roleName: '高级管理员',
          authStr: 'leader',
          order: 2,
          state: 0,
          department: '董事会',
          createTime: '2022-06-09',
          downloadAble: true
        }, {
          roleNumber: 3,
          roleName: '普通管理员',
          authStr: 'subLeader',
          order: 1,
          state: 0,
          department: '总经办',
          createTime: '2022-06-09',
          downloadAble: true
        }, {
          roleNumber: 4,
          roleName: '普通员工',
          authStr: 'employee',
          order: 1,
          state: 0,
          department: '市场部',
          createTime: '2022-06-09',
          downloadAble: false
        }
      ],
      filterCount: 1500
    }
  },
  methods: {
    test () {

    },
    cellClassName ({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex; // 自定义指定一个索引，下方能够用到
    },
    dblclick (row, column, cell, event) {
      const temp_arr = ['操作', '角色编号']
      // 1. 序号列单元格不允许编辑，别的列单元格可以编辑
      if (temp_arr.includes(column.label)) {
        this.$message({
          type: "warning",
          message: "序号列不允许编辑",
        });
        return;
      }
      // 2. 存一份旧的单元格的值
      this.oldCellValue = row[column.property];
      // 3. 然后把单元格的值，作为参数传递给实例化的input组件
      let cellValue = row[column.property];
      // 4. 实例化组件以后，带着参数，再挂载到对应位置
      new extendComponents.inputC({
        propsData: {
          // 使用propsData对象传递参数，子组件在props中可以接收到
          cellValue: cellValue, // 传递单元格的值
          saveRowData: this.saveRowData, // 传递回调函数用于保存行数据，组件中可以触发之
          cellDom: cell, // 传递这个dom元素
          row: row, // 传递双击的行的数据
          property: column.property, // 传递双击的是哪个字段
        },
      }).$mount(cell.children[0]); // 5. $mount方法，用于将某个dom挂载到某个dom上
    },
    /**
     * 失去焦点的时候有以下操作
     *    1. 校验新值是否等于原有值，若等于，说明用户未修改，就不发请求。若不等于就发请求，然后更新tableData数据
     *    2. 然后使用$mount方法，挂载一个新的span标签dom在页面上，即恢复原样，而span标签也是实例化的哦
     * */
    saveRowData (params) {
      console.log("继承的子组件传递过来的数据", params);
      // 1. 看看用户是否修改了
      if (params.cellValue == this.oldCellValue) {
        console.log("未修改数据，不用发请求");
      } else {
        params.row[params.property] = params.cellValue;
        // 这里模拟一下发了请求，得到最新表体数据以后，更新tableData
        setTimeout(() => {
          //        给那个数组的     第几项            修改为什么值
          this.$set(this.tableData, params.row.index, params.row);
        }, 300);
      }
      // 2. 恢复dom节点成为原来的样子，有下面两种方式

      /**
       * 方式一：使用官方推荐的$mount去挂载到某个节点上，上方也是
       * */
      new extendComponents.spanC({
        propsData: {
          cellValue: params.cellValue,
        },
      }).$mount(params.cellDom.children[0]);

      /**
       * 方式二：使用原生js去清空原节点内容，同时再添加子元素
       * */
      // let span = document.createElement("span"); // 创建一个span标签
      // span.innerHTML = params.cellValue; // 指定span标签的内容的值
      // span.classList.add("cell"); // 给span标签添加class为cell
      // params.cellDom.innerHTML = ""; // 清空刚操作的input标签的内容
      // params.cellDom.appendChild(span); // 再把span标签给追加上去，恢复原样
    },
  },
  created () { },
  components: {
    extendComponents
  }
}
</script>

<style lang="less" scoped>
.role {
  padding: 10px;
  .tableBox {
    .opera {
      display: flex;
      justify-content: flex-start;
      color: red;
      .btnItem {
        margin-right: 20px;
        cursor: pointer;
        text-align: center;
      }
    }
  }
}
</style>
<style lang="less">
.role {
  .el-button--text {
    font-size: 14px;
  }
}
.el-table th.el-table__cell > .cell {
  text-align: center;
}
</style>
